<template>
  <!-- 最大容器 -->
  <div class="Bigbox">
    <!-- X图片容器 -->
    <div class="closeBox">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- new图标容器 -->
    <div class="newBox">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 用户输入框容器 -->
    <div class="inputBox">
      <inputs
        textPlaceholder="用户名/手机号码"
        type="text"
        rule="^\d{5,11}$"
        err_msg="请输入正确的账号/手机号码"
        @valChange="setUserName"
      ></inputs>
    </div>
    <!-- 昵称输入容器 -->
    <div class="inputBox">
      <inputs
        textPlaceholder="昵称"
        type="text"
        rule="^\w{5,11}$"
        err_msg="请输入正确的昵称"
        @valChange="setNickName"
      ></inputs>
    </div>
    <!-- 密码输入容器 -->
    <div class="inputBox">
      <inputs
        textPlaceholder="密码"
        type="text"
        rule="^\d{5,11}$"
        err_msg="请输入正确的密码"
        @valChange="setPassWord"
      ></inputs>
    </div>
    <!-- 登录 -->
    <div class="bntBox">
      <buttons btnText="注册" @clicked="register"></buttons>
    </div>
  </div>
</template>

<script>
import inputs from "../components/inputbox";
import buttons from "../components/buttonbox";
export default {
  components: {
    inputs: inputs,
    buttons: buttons
  },
  //数据
  data() {
    return {
      userName: "",
      nickName: "",
      passWord: ""
    };
  },
  //方法
  methods: {
    //父组件·用户名数据存储
    setUserName(username) {
      this.userName = username;
    },
    //父组件·昵称数据存储
    setNickName(nickname) {
      this.nickName = nickname;
    },
    //父组件·密码数据存储
    setPassWord(password) {
      this.passWord = password;
    },

    //子传父之后，执行的父组件函数
    register() {
      //这里发送请求，但是发送请求前，需要先校验数据的正确性
      //如果只校验是不是空的，比较简单
      if (this.userName == "" || this.passWord == "" || this.nickName == "") {
        this.$toast.fail("用户信息不能为空");
        //弹窗以后阻止继续操作，return结束
        return;
      }

      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.userName,
          password: this.passWord,
          nickname: this.nickName
        }
      })
        //请求成功
        .then(res => {
          console.log(res.data);
          const { message, data } = res.data;
          //注册成功-轻提示
          if (message == "注册成功") {
            this.$toast.success(message);
            console.log(message);
          }
          //注册失败-轻提示
          else {
            this.$toast.fail(message);
            console.log(message);
          }
        })
        //请求错误
        .catch(err => {
          console.log("404");
        });
    }
  }
};
</script>

<style lang="less" scoped>
/* 样式初始化 */
* {
  padding: 0;
  margin: 0;
}
a {
  font-size: 5.556vw;
  color: darkseagreen;
}
a:hover {
  color: deeppink;
  text-decoration: none;
}
ol,
ul,
li {
  list-style: none;
}
/* 最大容器 */
.Bigbox {
  box-sizing: border-box;
  width: 100vw;
  height: 176.389vw;
  background-color: #fff;
}
/* X图标样式 */
.closeBox {
  padding-top: 8.333vw;
  .iconicon-test {
    margin: 5.556vw;
    font-size: 7.778vw;
    color: rgb(121, 121, 121);
  }
}

/* new图标样式 */
.newBox {
  text-align: center;
  .iconnew {
    font-size: 35vw;
    color: cadetblue;
  }
}
/* 输入框盒子 */
.inputBox {
  margin: 2.778vw;
  padding: 0 3.333vw;
  height: 13.889vw;
  line-height: 13.889vw;
  text-align: center;
  input {
    font-size: 4.444vw;
    padding-bottom: 2.778vw;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
  }
}
/* 按钮盒子 */
.bntBox {
  margin-top: 13.889vw;
  padding: 0 3.333vw;
  text-align: center;
  button {
    font-weight: 700;
    font-size: 4.444vw;
    color: darkslategrey;
    height: 12.778vw;
    width: 100%;
    background: cadetblue;
    border-radius: 6.389vw;
  }
}
</style>